<template>
  <d2-container>
    <div slot="header">
      <crud-search
        ref="search"
        :options="crud.searchOptions"
        @submit="handleSearch"
      />
      <el-button-group>
        <el-button size="small" type="primary" @click="addRow"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
      </el-button-group>
      <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" />
    </div>
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      v-on="_crudListeners"
      @view="viewRepo"
    ></d2-crud-x>
    <el-dialog
      title="仓库明细"
      :visible.sync="dialogVisible"
      width="70%"
      @closed="handleClose"
    >
      <el-table v-loading="loading" border stripe :data="bloodList">
        <el-table-column
          prop="volunteerName"
          label="献血志愿者"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="bloodType"
          label="血型"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="bloodVolume"
          label="血量(mm)"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="drawer"
          label="采血者"
        ></el-table-column>
        <el-table-column
          prop="drawDate"
          align="center"
          width="220"
          label="采血日期"
        ></el-table-column>
        <el-table-column
          prop="expireDate"
          align="center"
          width="220"
          label="有效期至"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="shelfLife"
          label="有效天数"
        ></el-table-column>
        <el-table-column align="center" prop="isQualified" label="是否合格">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isQualified === 0" type="danger"
              >不合格</el-tag
            >
            <el-tag v-else type="success">合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="isQualified" label="是否过期">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isOutdated === 0" type="success"
              >未过期</el-tag
            >
            <el-tag v-else type="danger">过期</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="remark" label="备注">
          <template slot-scope="scope">
            <span>{{ scope.row.remark ? scope.row.remark : "无" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </d2-container>
</template>
<script>
import { crudOptions } from './crud'
import { d2CrudPlus } from 'd2-crud-plus'
import api from './api'
export default {
  mixins: [d2CrudPlus.crud],
  data () {
    return {
      dialogVisible: false,
      loading: false,
      bloodList: []
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) { return api.getRepositoryList(query) },
    addRequest (row) { return api.addRepository(row) },
    updateRequest (row) { return api.updateRepository(row) },
    delRequest (row) { return api.deleteRepository(row._id) },
    async viewRepo ($event) {
      this.dialogVisible = true
      this.loading = true
      const { data, code } = await api.getRepository($event.row._id)
      if (code === 0) {
        this.bloodList = data.data
      }
      this.loading = false
    },
    handleClose () {
      this.bloodList = []
    }
  }
}
</script>
